<template>
  <div class="roles">
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>权限管理</el-breadcrumb-item>
          <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-button type="primary" plain>添加角色</el-button>
    <el-table border class="mt-15" :data="roleList" style="width: 100%">
      <el-table-column type="expand">
        <template #default="scope">
          <!-- 展开内容模板 -->

          <el-row
            v-for="firstChildren in scope.row.children"
            :key="firstChildren.id"
          >
            <el-col :span="4">
              <el-tag
                closable
                @close="deleteRight(scope.row, firstChildren.id)"
                >{{ firstChildren.authName }}</el-tag
              >
              <i
                class="el-icon-arrow-right"
                v-if="firstChildren.children.length !== 0"
              ></i>
            </el-col>
            <el-col :span="20">
              <el-row
                v-for="secondChildren in firstChildren.children"
                :key="secondChildren.id"
              >
                <el-col :span="4">
                  <el-tag
                    closable
                    type="success"
                    @close="deleteRight(scope.row, secondChildren.id)"
                    >{{ secondChildren.authName }}</el-tag
                  >
                  <i
                    class="el-icon-arrow-right"
                    v-if="secondChildren.children.length !== 0"
                  ></i>
                </el-col>
                <el-col :span="20">
                  <el-tag
                    closable
                    type="warning"
                    v-for="thirdChildren in secondChildren.children"
                    :key="thirdChildren.id"
                    @close="deleteRight(scope.row, thirdChildren.id)"
                  >
                    {{ thirdChildren.authName }}
                  </el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row v-if="scope.row.children.length === 0">
            <el-col :span="24">该角色没有分配权限，请前往分配！</el-col>
          </el-row>
        </template>
      </el-table-column>
      <!-- 展开内容模板结束 -->

      <el-table-column label="角色名称" prop="roleName" width="165px">
      </el-table-column>
      <el-table-column label="描述" prop="roleDesc" width="130px">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="编辑"
            placement="top"
          >
            <el-button
              size="mini"
              type="primary"
              plain
              :icon="Edit"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="删除"
            placement="top"
          >
            <el-button
              size="mini"
              type="danger"
              plain
              :icon="Delete"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="设置"
            placement="top"
          >
            <el-button
              size="mini"
              type="warning"
              plain
              :icon="Setting"
              @click="showDialog(scope.row)"
            ></el-button
          ></el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 权限列表弹框 -->
  <el-dialog title="授权角色" v-model="dialogFormVisible">
    <div class="tree-container">
      <el-tree
        :data="rightList"
        show-checkbox
        ref="tree"
        node-key="id"
        :default-expand-all="true"
        :default-checked-keys="selectedRights"
        :props="defaultProps"
      >
      </el-tree>
    </div>
    <template #footer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitGrant">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { Delete, Edit, Avatar, Search, Setting } from '@element-plus/icons-vue'
import { ref, onMounted, reactive } from 'vue'
import {
  getRoleList,
  getRightList,
  grantRoleRight,
  deleteRoleRight,
} from '@/api/rights'

const roleList = ref([])

const initGetRoleList = async () => {
  // 1 发送请求
  // 2 数据渲染
  let res = await getRoleList()
  console.log(res)
  if (res.meta.status == 200) {
    roleList.value = res.data
  }
}

onMounted(() => {
  initGetRoleList()
})

//定义打开权限列表的数据
const dialogFormVisible = ref(false)

const selectedRights = ref([])
const rightList = ref([])
const tree = ref(null)

const currentItem = ref({})
const defaultProps = {
  children: 'children',
  label: 'authName',
}

//绑定事件  打开弹框
const showDialog = async (row) => {
  selectedRights.value.length = 0
  console.log(selectedRights.value)

  //保持当前的的对象
  console.log(row)
  currentItem.value = row

  //1 打开 弹框
  dialogFormVisible.value = true
  // 获取权限列表
  let res = await getRightList({ type: 'tree' })
  console.log(res)
  //  赋值
  rightList.value = res.data

  // 调用之前 先清空内存缓存选中的数据

  // 传递当前对象
  chekedNodeId(row.children, selectedRights.value)

  console.log(selectedRights.value)
  // 保持之前已经授权的权限 selectedRights 要求是一个数组
  // selectedRights.value = [...halfCheked, ...allChecked]
}

//获取选中权限的函数
const chekedNodeId = (treeNode, arr) => {
  treeNode.forEach((item) => {
    if (!item.children) {
      return arr.push(item.id)
    } else {
      return chekedNodeId(item.children, arr)
    }
  })
}

//设置权限
const submitGrant = async () => {
  //1 获取到选中的权限列表
  let allChecked = tree.value.getCheckedKeys()
  //2 获取到半选中权限列表
  let halfCheked = tree.value.getHalfCheckedKeys()

  //合并选中的和半选中的数组
  let rids = [...halfCheked, ...allChecked].join(',')
  // console.log(rids)
  // let roleId=
  // console.log(currentItem)
  // console.log(allChecked)
  // console.log(halfCheked)
  // 3 发送请求
  let res = await grantRoleRight(currentItem.value.id, { rids })
  console.log(res)

  // 4 关闭弹框
  dialogFormVisible.value = false

  // 5 重新获取新的数据
  initGetRoleList()
}

// 删除对应的权限
const deleteRight = async (row, rightId) => {
  // 1  是否真的要删除
  //  2  确认了给出对应的逻辑

  let res = await deleteRoleRight({ roleId: row.id, rightId: rightId })

  console.log(res.data)

  // rightList.value = res.data //??  减少http
  initGetRoleList()
}
</script>

<style lang="scss" scoped>
.roles {
  .el-tag {
    margin-right: 5px;
    margin-bottom: 5px;
  }
  .tree-container {
    height: 300px;
    overflow: auto;
  }
}
</style>
